<blockquote class="layui-elem-quote">
    <div class="layui-inline">
        <i class="layui-icon layui-icon-list layui-head-icon"></i>
        <span class="layui-font-16 layui-font-green">添加拼团活动</span>
    </div>
</blockquote>
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form">
            <fieldset class="layui-elem-field">
                <legend class="layui-font-green">活动信息</legend>
                <div class="layui-field-box">
                    <input type="hidden" name="id" value="{$row.id}">
                    <div class="layui-form-item">
                        <label class="layui-form-label">活动标题</label>
                        <div class="layui-input-block">
                            <input type="text" name="activity_title" required lay-verify="required" placeholder="请输入活动标题"
                                   value="{$row.activity_title}" autoComplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">活动封面</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="activity_cover" id="icon" value="{$row.activity_cover}">
                            <img src="{notempty name='row.activity_cover'}{$row.activity_cover}{else/}/static/admin/img/upimg.png{/notempty}" class="layui-long-upimg" id="upload">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">活动时间</label>
                        <div class="layui-inline" id="time">
                            <div class="layui-input-inline">
                                <input type="text" autoComplete="off" value="{$row.start_time|date='Y-m-d H:i:s'}" name="start_time" id="strat-time" class="layui-input"
                                       placeholder="开始日期">
                            </div>
                            <div class="layui-form-mid">-</div>
                            <div class="layui-input-inline">
                                <input type="text" autoComplete="off" value="{$row.end_time|date='Y-m-d H:i:s'}" name="end_time" id="end-time" class="layui-input"
                                       placeholder="结束日期">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">选择商品</label>
                        <div class="layui-input-block">
                            <div class="layui-inline">
                                <input type="text" disabled style="width: 800px;" id="goods-names" autocomplete="off"
                                       class="layui-input">
                                <input type="hidden" name="allow_goods" id="allow-goods">
                                <input type="hidden" name="param" id="param" value="{$row.goods|json_encode}">
                            </div>
                            <div class="layui-inline">
                                <button type="button" class="layui-btn" id="choose-goods">选择</button>
                            </div>
                        </div>
                        <div class="layui-input-block" id="imgs">
                        </div>
                    </div>
                </div>
            </fieldset>
            <fieldset class="layui-elem-field">
                <legend class="layui-font-green">活动设置</legend>
                <div class="layui-field-box">
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否需要拼团卷</label>
                        <div class="layui-input-block">
                            <input type="radio" name="is_coupon" {if $row.is_coupon ==1}checked{/if} value="1" title="需要">
                            <input type="radio" name="is_coupon" {if $row.is_coupon ==0}checked{/if} value="0" title="不需要">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">预付金额</label>
                        <div class="layui-input-inline">
                            <input type="text" name="prepayment_amount" value="{$row.prepayment_amount}" required lay-verify="required" autoComplete="off"
                                   class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux layui-font-red">值为0不进行预付</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">拼团人数</label>
                        <div class="layui-input-inline">
                            <input type="text" name="group_num" id="group-num" value="{$row.group_num}" required lay-verify="required"
                                   autoComplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux layui-font-red">值为-1则不限制拼团人数</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">中奖人数</label>
                        <div class="layui-input-inline">
                            <input type="number" name="win_num" value="{$row.win_num}" required lay-verify="required" autoComplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">奖励</label>
                        <div class="layui-input-block">
                            <table class="layui-table">
                                <tr>
                                    <th>类型类型</th>
                                    <th>积分奖励</th>
                                    <th>余额奖励</th>
                                </tr>
                                <tr id="success">
                                    <td>成功奖励</td>
                                    <td>
                                        <div class="layui-inline">
                                            <input type="text" value="{$row.success_rule.integral}" class="layui-input award integral">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="layui-inline">
                                            <input type="text" value="{$row.success_rule.balance}"  class="layui-input award balance">
                                        </div>
                                    </td>
                                </tr>
                                <tr id="fail">
                                    <td>失败奖励</td>
                                    <td>
                                        <div class="layui-inline">
                                            <input type="text" value="{$row.fail_rule.integral}" class="layui-input award integral">
                                        </div>
                                    <td>
                                        <div class="layui-inline">
                                            <input type="text" value="{$row.fail_rule.balance}" class="layui-input award balance">
                                        </div>
                                    </td>
                                </tr>
                            </table>
                            <div class="layui-form-mid layui-word-aux layui-font-red">值为0则不发放奖励</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">活动状态</label>
                            <div class="layui-input-block">
                                <input type="radio" name="status" {if $row.status==1 }checked {/if} value="1" title="开启">
                                <input type="radio" name="status" {if $row.status==0 }checked {/if} title="关闭">
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset>

            <fieldset class="layui-elem-field">
                <legend class="layui-font-green">转手设置</legend>
                <div class="layui-field-box">
                    <div id="resell">
                        <div class="layui-form-item">
                            <label class="layui-form-label">是否可转手</label>
                            <div class="layui-input-block">
                                <input type="radio" name="is_transfer" {if $row.is_transfer ==1}checked{/if} lay-filter="is_transfer" value="1" title="是">
                                <input type="radio" name="is_transfer" {if $row.is_transfer ==0}checked{/if} lay-filter="is_transfer" value="0" title="否">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">是否限制会员参与</label>
                            <div class="layui-input-block">
                                <input type="radio" name="is_limit_member" {if $row.is_limit_member==1}checked{/if} value="1" title="限制">
                                <input type="radio" name="is_limit_member" {if $row.is_limit_member==0}checked{/if} value="0" title="不限制">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">是否需要转手卷</label>
                            <div class="layui-input-block">
                                <input type="radio" name="is_resell_coupon" {if $row.is_resell_coupon==1}checked{/if} value="1" title="需要">
                                <input type="radio" name="is_resell_coupon" {if $row.is_resell_coupon==0}checked{/if} value="0" title="不需要">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">转手商品价格折比</label>
                            <div class="layui-input-inline">
                                <input type="text" name="resell_rate"  required lay-verify="required" value="{$row.resell_rate}"
                                       autoComplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux layui-font-red">商品原价格为100*当前设置比例为20 则转手价格为 100*90%=90</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">转手开团人数</label>
                            <div class="layui-input-inline">
                                <input type="number"  autoComplete="off" name="transfer_people_num" class="layui-input" value="{$row.transfer_people_num}">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">可转手次数</label>
                            <div class="layui-input-inline">
                                <input type="number" autoComplete="off" name="transfer_times" class="layui-input" value="{$row.transfer_times}">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">转手限制时间</label>
                            <div class="layui-input-inline">
                                <input type="number" autoComplete="off" name="resell_time" class="layui-input" value="{$row.resell_time}">
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset>

            <fieldset class="layui-elem-field">
                <legend class="layui-font-green">活动规则</legend>
                <div class="layui-field-box">
                    <textarea name="rule_content" id="content">{$row.rule_content}</textarea>
                </div>
            </fieldset>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formAdd">保存活动</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="/static/js/tinymce/tinymce.min.js"></script>
<script>
    $(document).ready(function () {
        tinymce.init({
            selector: '#content',
            language: 'zh_CN',
            plugins: 'preview image  emoticons table link hr anchor fullscreen lists',
            toolbar: 'bold italic underline strikethrough alignleft aligncenter alignright alignjustify indent outdent numlist bullist ' +
                'fontselect fontsizeselect forecolor backcolor blockquote removeformat ' +
                'emoticons image link hr anchor fullscreen preview',
            images_upload_url: '/store/upload/layedit',
            min_height: 500,
            setup: function (editor) {
                editor.on('change', function () {
                    editor.save();
                });
            },
        });
    })
    layui.use(['form', 'upload', 'laydate'], function () {
        var $ = layui.jquery, form = layui.form, upload = layui.upload, laydate = layui.laydate;


        upload.render({
            elem: "#upload",
            field: "image",
            url: "/store/upload",
            done: function (res) {
                if (res.code == 1) {
                    $('#upload').attr('src', res.src)
                    $('#icon').val(res.src);
                }
            }
        });

        form.on('radio(is_transfer)',function (data){
            let el = $('#resell');
            if (data.value == 0){
                el.addClass('layui-hide');
            }

            if (data.value == 1){
                el.removeClass('layui-hide');
            }
        });

        laydate.render({
            elem: '#time',
            type: 'datetime',
            range: ['#strat-time', '#end-time']
        });

        let success_rule = {},fail_rule = {};
        function getAwardRule(){
            let success = $('#success'),fail = $('#fail');
            success_rule.integral = success.find('.integral').val();
            success_rule.balance = success.find('.balance').val();

            fail_rule.integral = fail.find('.integral').val();
            fail_rule.balance = fail.find('.balance').val();

            return {success_rule:success_rule,fail_rule:fail_rule};
        }

        $('.award').blur(function () {
            let val = $(this).val();
            if (!val) {
                layer.msg('比例不能为空!', {icon: 2})
                $(this).val(0);
                return false;
            }

            if (val < 0 || val > 100) {
                layer.msg('比例不能小于0或大于100!', {icon: 2})
                $(this).val(0);
                return false;
            }
        });

        let param = $('#param').val();

        if (param){
            let data = JSON.parse(param);
            getUseGoodsInfo(data);
        }


        function getUseGoodsInfo(param) {

            $('#param').val(JSON.stringify(param));

            let ids = [], name = '', img = '';

            param.forEach(function (item) {
                ids.push({
                    goods_id: item.goods_id
                });
                name += item.goods_name + ';;',
                    img += '<div class="layui-inline"> ' +
                        '<img src="' + item.main_image + '" id="upload" class="layui-view-img">' +
                        '<i data-id="' + item.goods_id + '" class="layui-icon layui-view-img-close">&#x1006</i>' +
                        '</div>';
            });

            $('#allow-goods').val(JSON.stringify(ids));
            $('#imgs').html(img);
            $('#goods-names').val(name);
        }

        $(document).on('click', '.layui-view-img-close', function () {
            let goodsInfo = JSON.parse($('#param').val());
            let id = $(this).attr('data-id');

            let i = goodsInfo.findIndex(function (item) {
                return item.goods_id == id
            });
            goodsInfo.splice(i, 1);
            getUseGoodsInfo(goodsInfo);

        });

        $('#choose-goods').click(function () {
            layer.open({
                title: ['选择商品'],
                type: 2,
                area: ['1000px', '800px'],
                offset: '30px',
                btn: ['确定', '取消'],
                maxmin: true,
                content: '/store/group/goods/option?group_activity_id={$row.id}',
                yes: function (index, layero) {
                    let checkbox = $(layero).find('iframe').contents().find('.son:checked');
                    if (checkbox.length < 1) {
                        layer.msg('请选择商品!', {icon: 2});
                        return false;
                    }

                    let goodsInfo = [];


                    checkbox.each(function () {
                        goodsInfo.push({
                            goods_id: $(this).val(),
                            goods_name: $(this).parents('tr').find('.goods-name').text(),
                            main_image: $(this).parents('tr').find('.main-image').attr('src')
                        });
                    })
                    let param = [];

                    let paramEle = $('#param');
                    param = paramEle.val() ? JSON.parse(paramEle.val()).concat(goodsInfo) : goodsInfo;

                    getUseGoodsInfo(param);

                    parent.layer.close(index);
                }
            });

        });

        form.on('submit(formAdd)', function (data) {

            let award = getAwardRule();
            data.field.success_rule = award.success_rule;
            data.field.fail_rule = award.fail_rule;
            console.log(data.field);
            $.post('/store/group/activity/update', data.field, function (res) {
                if (res.code == 1) {
                    layer.msg(res.msg, {icon: 1})
                    location.href = '/store/group/activity'

                    return false;
                }
                return layer.msg(res.msg, {icon: 2});
            });
            return false;
        });

    });
</script>